<template>
	<!--新增对话框-->
	<el-dialog title="运营信息详情" :visible.sync="dialogVisible" width="1100px" :before-close="handleClose">
		<el-form :inline="true">
			<el-form-item>
				<el-button type="primary" @click="addUpdateNoticeButton({})" v-if="hasAuth('sys:notice:info:add')"
					>新增</el-button
				>
			</el-form-item>
		</el-form>
		<el-table
			ref="multipleTable"
			:data="tableData"
			tooltip-effect="dark"
			style="width: 100%"
			border
			stripe
			@selection-change="handleSelectionChange"
		>
			<el-table-column prop="jump_to_target" label="跳转目标" align="center">
				<template slot-scope="scope">
					<el-input v-model="scope.row.jump_to_target"></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="jump_to_type" align="center" label="跳转类型" label-class-name="add-red-star">
				<template slot-scope="scope">
					<el-select v-model="scope.row.jump_to_type" placeholder="请选择">
						<el-option
							v-for="item in jumpTypeList"
							:key="item.label"
							:label="item.label"
							:value="item.value"
						>
						</el-option>
					</el-select>
				</template>
			</el-table-column>
			<el-table-column prop="lang" align="center" label="语言" label-class-name="add-red-star">
				<template slot-scope="scope">
					<el-select v-model="scope.row.lang" placeholder="请选择">
						<el-option v-for="item in langList" :key="item.label" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</template>
			</el-table-column>
			<el-table-column
				prop="notice_text"
				align="center"
				label="提示内容"
				width="250"
				label-class-name="add-red-star"
			>
				<template slot-scope="scope">
					<el-input v-model="scope.row.notice_text"></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="text_type" align="center" label="文本类型" label-class-name="add-red-star">
				<template slot-scope="scope">
					<el-select v-model="scope.row.text_type" placeholder="请选择">
						<el-option
							v-for="item in textTypeList"
							:key="item.label"
							:label="item.label"
							:value="item.value"
						>
						</el-option>
					</el-select>
				</template>
			</el-table-column>
			<el-table-column prop="icon" align="center" label="操作">
				<template slot-scope="scope">
					<template v-if="hasAuth('sys:notice:delete')">
						<el-popconfirm title="这是一段内容确定删除吗？" @confirm="delHandle(scope.row)">
							<el-button
								v-if="scope.row.lang !== 'en' && hasAuth('sys:notice:info:delete')"
								type="danger"
								plain
								slot="reference"
								>删除</el-button
							>
						</el-popconfirm>
					</template>
				</template>
			</el-table-column>
		</el-table>
		<div class="button-center">
			<el-button type="primary" @click="saveData" v-if="hasAuth('sys:notice:info:save')">保存</el-button>
		</div>
		<SubAddUpdateNotice
			ref="subAddUpdateNotice"
			v-if="addUpdateNoticevisible"
			@refreshDataList="getNoticeList"
		></SubAddUpdateNotice>
	</el-dialog>
</template>

<script>
import dayjs from 'dayjs';
import SubAddUpdateNotice from './SubAddUpdateNotice';
export default {
	name: 'AddUpdateRole',
	components: {
		SubAddUpdateNotice,
	},
	data() {
		return {
			searchForm: {},
			delBtlStatu: true,
			total: 0,
			size: 10,
			current: 1,
			multipleSelection: [],
			vegetablesType: [],
			addUpdateVegetablesvisible: false,
			takeDownVegetablesvisible: false,
			addUpdateNoticevisible: false,
			tableData: [],
			farmList: [],
			loading: false,
			dialogVisible: false,
			id: 0,
			formData: {
				// 表单其他数据
			},
			formRules: {
				// 表单其他校验规则
			},
			textTypeList: [
				{ value: 'TEXT', label: '纯文本' },
				{ value: 'RICH_TEXT', label: '富文本' },
			],
			jumpTypeList: [
				{ value: 'URL', label: '链接' },
				{ value: 'POSITION', label: '位置' },
				{ value: 'NONE', label: '无' },
			],
			langList: [
				{ value: 'ja', label: '日语' },
				{ value: 'en', label: '英语' },
				{ value: 'zh_hans', label: '中文简体' },
				{ value: 'zh_hant', label: '中文繁体' },
				{ value: 'de', label: '德语' },
				{ value: 'ru', label: '俄语' },
				{ value: 'ko', label: '韩语' },
				{ value: 'it', label: '意大利语' },
				{ value: 'fr', label: '法语' },
				{ value: 'es', label: '西班牙语' },
				{ value: 'vi', label: '越南语' },
				{ value: 'th', label: '泰语' },
				{ value: 'uk', label: '乌克兰语' },
				{ value: 'id', label: '印度尼西亚语' },
				{ value: 'nl', label: '荷兰语' },
				{ value: 'hi', label: '印地语' },
				{ value: 'pt', label: '葡萄牙语' },
				{ value: 'cs', label: '捷克语' },
				{ value: 'tr', label: '土耳其语' },
			],
			langInfo: {
				'ja-JP': 'ja',
				'zh-CN': 'zh_hans',
				'zh-TW': 'zh_hant',
				'en-US': 'en',
				'es-ES': 'es',
				'de-DE': 'de',
				'fr-FR': 'fr',
				'it-IT': 'it',
				'ru-RU': 'ru',
				'ko-KR': 'ko',
				'th-TH': 'th',
				'nl-NL': 'nl',
				'id-ID': 'id',
				'pt-PT': 'pt',
				'tr-TR': 'tr',
				'uk-UA': 'uk',
				'vi-VN': 'vi',
				'hi-IN': 'hi',
				'cs-CZ': 'cs',
			},
		};
	},
	methods: {
		handleClose() {
			this.dialogVisible = false;
		},
		addUpdateNoticeButton(item) {
			this.tableData.push({});
		},
		formatTime(time) {
			const localTime = dayjs(time).format('YYYY-MM-DD HH:mm:ss');
			// 使用Day.js将时间转换成当前时区的时间
			return localTime;
		},
		handleSelectionChange(val) {
			this.multipleSelection = val;
			this.delBtlStatu = val.length == 0;
		},
		getNoticeList() {
			this.$axios
				.get('/notice/getDetailByNoticeId', {
					params: {
						notice_id: this.id,
					},
				})
				.then((res) => {
					console.log('userList', res);
					for (var i = 0; i < res.data.length; i++) {
						res.data[i].lang = this.langInfo[res.data[i].lang];
					}
					// 其余的代码
					this.tableData = res.data;
				})
				.catch((error) => {
					console.error('发生请求错误：', error);
				});
		},
		delHandle(item) {
			if (item.id) {
				var ids = [];
				ids.push(item.id);
				this.$axios.post('/notice/deleteTextByIds', { ids: ids }).then((res) => {
					this.$message({
						showClose: true,
						message: '恭喜你，操作成功',
						type: 'success',
						onClose: () => {
							this.getNoticeList();
						},
					});
				});
			} else {
				this.tableData = this.tableData.filter((i) => i !== item);
			}
		},
		init(item) {
			this.dialogVisible = true;
			this.id = item.id;
			this.getNoticeList();
		},
		saveData() {
			// 标志是否存在特定的 lang 值（例如，'en'）
			let hasLangEn = false;
			const langSet = new Set();
			// 遍历 JSON 数组，检查 lang 值是否已经存在于 Set 中
			for (const obj of this.tableData) {
				if (langSet.has(obj.lang)) {
					console.log(`重复的 lang 值：${obj.lang}`);
					this.$message({
						showClose: true,
						message: '配置的语言不能重复，请删除重复的语言！',
						type: 'warning',
					});
					return;
				} else {
					// 如果 lang 值没有重复，将其添加到 Set 中
					langSet.add(obj.lang);
					if (obj.lang === 'en') {
						hasLangEn = true;
					}
					if (!obj.jump_to_type) {
						this.$message({
							showClose: true,
							message: '配置的跳转类型不能为空！',
							type: 'warning',
						});
						return;
					}
					if (!obj.lang) {
						this.$message({
							showClose: true,
							message: '配置的语言不能为空！',
							type: 'warning',
						});
						return;
					}
					if (!obj.notice_text) {
						this.$message({
							showClose: true,
							message: '配置的提示内容不能为空！',
							type: 'warning',
						});
						return;
					}
					if (!obj.text_type) {
						this.$message({
							showClose: true,
							message: '配置的文本类型不能为空！',
							type: 'warning',
						});
						return;
					}
				}
			}
			if (hasLangEn) {
				console.log('存在 lang 值为 "en"。');
			} else {
				this.$message({
					showClose: true,
					message: '配置的语言必须包含英文，请重新配置！',
					type: 'warning',
				});
				return;
			}
			const info = {
				notice_id: this.id,
				save_request_list: this.tableData,
			};
			this.$axios.post('/notice/edit', info).then((res) => {
				this.$message({
					showClose: true,
					message: '恭喜你，操作成功',
					type: 'success',
					onClose: () => {
						this.$emit('refreshDataList');
					},
				});
				this.dialogVisible = false;
			});
		},
	},
};
</script>

<style>
.button-center {
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cell.add-red-star::before {
	content: '* ';
	color: red;
}
</style>
